<template>
  <main class="right-content" :class="rightContentClasses">
    <!-- Title Bar -->
    <TitleBar
      v-bind="titleBarProps"
      class="right-content__titlebar"
    />
    
    <!-- Bottom Content -->
    <RightBottom
      v-bind="rightBottomProps"
      class="right-content__bottom"
    />
  </main>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUI } from '@/composables'
import type { TitleBarProps, RightBottomProps } from '@/types'
import TitleBar from './TitleBar.vue'
import RightBottom from './RightBottom.vue'

// Props
interface Props {
  titleBarProps: TitleBarProps
  rightBottomProps: RightBottomProps
}

defineProps<Props>()

// Composables
const ui = useUI()

// Computed properties
const rightContentClasses = computed(() => ({
  'right-content--mobile': ui.isMobile,
  'right-content--tablet': ui.isTablet,
  'right-content--desktop': ui.isDesktop,
  'right-content--dark': ui.theme === 'dark'
}))
</script>

<style scoped>
.right-content {
  display: grid;
  grid-template-rows: var(--titlebar-height) 1fr;
  height: 100vh;
  background-color: var(--color-background);
  overflow: hidden;
}

.right-content--dark {
  background-color: #1a1a1a;
}

.right-content__titlebar {
  grid-row: 1;
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-sticky);
}

.right-content__bottom {
  grid-row: 2;
  min-height: 0; /* Prevent overflow */
}

/* Responsive adjustments */
.right-content--mobile {
  /* Mobile specific styles if needed */
}

.right-content--tablet {
  /* Tablet specific styles if needed */
}

.right-content--desktop {
  /* Desktop specific styles if needed */
}

/* Focus management */
.right-content:focus-within {
  outline: none;
}
</style>